<template>
  <!-- 二级 -->
  <el-sub-menu :index="item.id" v-if="item[ItemOptions.children] && item.children.length > 0">
    <!-- 显示文本 -->
    <template #title>
      <el-icon class="iconfont" :class="icon[item.order - 1]"></el-icon>
      <span>{{ item[ItemOptions.authName] }}</span>
      <!-- 二级导航  组件递归 -->
    </template>
    <subMenu
      v-for="it in item[ItemOptions.children]"
      :item="it"
      :key="it[ItemOptions.id]"
    ></subMenu>
  </el-sub-menu>

  <!-- 一级 -->
  <el-menu-item v-else :index="/home/ + item.path">
    <el-icon></el-icon>
    <template #title>
      {{ item[ItemOptions.authName] }}
    </template>
  </el-menu-item>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'subMenu',

  props: {
    item: {
      type: Object,
      default: () => ({ id: 123, authName: '用户管理', path: 'user', children: [] })
    },
    ItemOptions: {
      type: Object,
      default: () => ({ id: 'id', authName: 'authName', children: 'children' })
    },
    icon: {
      type: Array,
      default: () => {
        return [
          'icon-yonghuguanli',
          'icon-quanxianguanli',
          'icon-shangpinguanli',
          'icon-dingdanguanli',
          'icon-data-management'
        ]
      }
    }
  }
})
</script>

<style>
.el-sub-menu__title {
  color: #fff;
}
</style>
